<template>
  <div class="com-container">
    <rz-height></rz-height>
    <el-row :gutter="10">
      <el-col :span="8" class="col_wapper">
        <div>累计注册人数</div>
        <div>
          <span class="number">
            <countTo
              :startVal="startVal"
              :endVal="data.signTotal || 0"
              :duration="3000"
            ></countTo>
          </span>
          人
        </div>
        <div>
          今日注册<span class="people">
            <countTo
              :startVal="startVal"
              :endVal="data.signToday || 0"
              :duration="3000"
            ></countTo></span
          >人
        </div>
      </el-col>
      <el-col :span="8" class="col_wapper center_border">
        <div>累计添加单位数</div>
        <div>
          <span class="number">
            <countTo
              :startVal="startVal"
              :endVal="data.cpyAddTotal || 0"
              :duration="3000"
            ></countTo>
          </span>
          家
        </div>
        <div>
          今日添加<span class="people">
            <countTo
              :startVal="startVal"
              :endVal="data.cpyAddToday || 0"
              :duration="3000"
            ></countTo> </span
          >家
        </div>
      </el-col>
      <el-col :span="8" class="col_wapper">
        <div>累计登录次数</div>
        <div>
          <span class="number"
            ><countTo
              :startVal="startVal"
              :endVal="data.signTotal + data.loginTotal || 0"
              :duration="3000"
            ></countTo>
          </span>
          次
        </div>
        <div>
          今日登录<span class="people">
            <countTo
              :startVal="startVal"
              :endVal="data.signToday + data.loginToday || 0"
              :duration="3000"
            ></countTo></span
          >次
        </div>
      </el-col>
    </el-row>

    <div style="width: 100%; height: 580px" id="map"></div>
  </div>
</template>
<script>
import request from '@/utils/request';
import countTo from 'vue-count-to';
var echarts = require('echarts');
import suzhoudata from '../../../../assets/js/suzhoudata';
export default {
  created() {},
  props: {
    code: {
      type: String,
      default: '',
    },
  },
  components: {
    countTo,
  },
  data() {
    return {
      data: {},
      myChart: '',
      startVal: 0,
    };
  },
  mounted() {
    this.queryInfo();
  },
  destroyed() {},
  methods: {
    initEcharts() {
      this.myChart = echarts.init(document.getElementById('map'));
      echarts.registerMap('js', suzhoudata);
      var option = {
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: function(e, t) {
            return e.name + '<br/>' + `累计注册${e.value}人`;
          },
        },
        visualMap: {
          // backgroundColor: "#2A589E",
          min: 0,
          max: 1000,
          left: 0,
          bottom: 0,
          showLabel: true,
          pieces: [
            {
              gt: 1000,
              label: '>1000',
              color: '#0033EE',
            },
            {
              gte: 500,
              lte: 1000,
              label: '500-1000',
              color: '#003C9D',
            },
            {
              gte: 100,
              lte: 499,
              label: '100-499',
              color: '#0044BB',
            },
            {
              gte: 0,
              lt: 100,
              label: '小于100',
              color: '#0066FF',
            },
          ],
          show: true,
          textStyle: {
            color: '#fff',
          },
        },
        series: [
          {
            data: this.data.cityInfoList.map(x => {
              x.name = x.bodyindustry;
              x.value = x.count;
              return x;
            }),
            // [
            //   {
            //     name: "虎丘区",
            //     value: 3433434353,
            //   },
            //   {
            //     name: "吴中区",
            //     value: 32353434,
            //     info: "10.3万人/1000/0.7%",
            //   },
            //   {
            //     name: "相城区",
            //     value: 54353435,
            //     info: "10.3万人/1000/0.7%",
            //   },
            //   {
            //     name: "姑苏区",
            //     value: 3512312,
            //     info: "10.3万人/1000/0.7%",
            //   },
            //   {
            //     name: "吴江区",
            //     value: 233,
            //     info: "10.3万人/1000/0.7%",
            //   },
            //   {
            //     name: "苏州工业园区",
            //     value: 45,
            //     info: "10.3万人/1000/0.7%",
            //   },
            //   {
            //     name: "常熟市",
            //     value: 445,
            //     info: "10.3万人/1000/0.7%",
            //   },
            //   {
            //     name: "张家港市",
            //     value: 2342,
            //     info: "10.3万人/1000/0.7%",
            //   },
            //   {
            //     name: "昆山市",
            //     value: 11000,
            //     info: "10.3万人/1000/0.7%",
            //   },
            //   {
            //     name: "太仓市",
            //     value: 2342,
            //     info: "10.3万人/1000/0.7%",
            //   },
            // ]
            zoom: 1.2,
            type: 'map',
            map: 'js',
            emphasis: {
              areaColor: '#141C34',
              borderWidth: 1,
              color: 'green',
              itemStyle: {
                borderColor: '#2980b9',
                borderWidth: 0,
                areaColor: '#00B3FE',
              },
              label: {
                show: true,
                fontSize: '11',
                color: '#ffffff',
              },
            },
            label: {
              show: true,
              fontSize: '11',
              color: '#ffffff',
            },
          },
        ],
      };
      this.myChart.setOption(option);
      this.myChart.on('mousedown', params => {
        // params.color = "#2980b9";
        this.myChart.setOption(option);
      });
    },
    queryInfo() {
      this.$http
        .queryInfo({
          code: this.code,
        })
        .then(res => {
          if (res.code == 200) {
            this.data = res.data;
            this.initEcharts();
          } else {
            this.$error(res.msg);
          }
        })
        .catch(err => {
          this.$error();
          console.log(err);
        });
    },
  },
};
</script>
<style lang="less" scoped>
.com-container {
  height: 100%;
  .col_wapper {
    color: #4adefe;
    text-align: center;
    font-size: 15px;
    .number {
      font-size: 30px;
      color: #f3db5c;
    }
    .people {
      color: #f3db5c;
    }
  }
  .center_border {
    border: 1px solid #4adefe;
    border-bottom: none;
    border-top: none;
  }
}
</style>
